<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<%@ include file="/WEB-INF/jsp/web/commons/global.jsp"%>

<div class="mod-content-item">
	<div class="user-img">
		<img src="${comment.user.portraitUrl }">
	</div>
	<div class="comment-info">
		<div class="user-comment">
			<span class="user-name">${comment.user.nickname }: </span>
			<c:if test="${comment.itemType == 4}">
				<span class="to-user-name-div"> 回复 <span class="to-user-name">
						@${comment.comment.user.nickname } </span>:
				</span>
			</c:if>
			<span class="comment"> ${comment.content } </span>
		</div>
		<div class="comment-bars">
			<div class="time">${comment.showTime }</div>
			<div class="bars">
				<ul class="ul-li-horizontal">
					<li class="bar like-bar -like-bar-dyc-${comment.id }"><a
						href="javascript:;"> <input type="text"
							value="4,${comment.id },1" class="value-store"
							style="display: none;" /> <c:choose>
								<c:when test="${comment.praise }">
									<i class="icon-thumbs-up"></i>
								</c:when>
								<c:otherwise>
									<i class="icon-thumbs-up undertone"></i>
								</c:otherwise>
							</c:choose> <span><c:if test="${comment.statistics.countPraise > 0}">${comment.statistics.showCountPraise}</c:if>
						</span>
					</a></li>
					<li class="vertical-split-line-1"></li>
					<c:choose>
						<c:when test="${userContext.userId == comment.user.id }">
							<li class="bar delete-bar -delete-bar-dyc-${comment.id }"><input
								type="text" value="${comment.id }" class="value-store"
								style="display: none;" /> <a href="javascript:;">删除</a></li>
						</c:when>
						<c:otherwise>
							<li class="bar reply-bar -reply-bar-dyc-${comment.id }"><a
								href="javascript:;">回复</a> <br /> &nbsp; <i
								class="icon-caret-up arrow arrow-hid"></i></li>
						</c:otherwise>
					</c:choose>
					<c:if
						test="${comment.itemType == 4 || (comment.countChildCommentForTop > 0)}">
						<li class="vertical-split-line-1"></li>
						<li class="bar dialog-bar"><a href="javascript:;"
							onclick="showDialog(${comment.id})">查看对话</a></li>
					</c:if>
					<c:if test="${userContext.userId !=  comment.user.id}">
						<li class="vertical-split-line-1 report-bar-split"></li>
						<li class="bar report-bar"><a href="javascript:;"
							onclick="showExpose(4,${comment.id })">举报</a></li>
					</c:if>
					<div class="clear-both"></div>
				</ul>
				<div class="clear-both"></div>
			</div>
			<div class="clear-both"></div>
		</div>
		<div class="reply hid">
			<div class="form-group">
				<textarea class="form-control textarea-auto-height clear-radius"
					rows="1">回复@${comment.user.nickname }:</textarea>
			</div>
			<div class="reply-btn-div -reply-btn-div-dyc-${comment.id }">
				<input class="value-store" value="4,${comment.id }" /> <a
					href="javascript:;" class="btn btn-default btn-sm clear-radius">评&nbsp;论</a>
			</div>
			<div class="clear-both"></div>
		</div>
		<div class="vertical-spacing-10"></div>
	</div>
	<div class="clear-both"></div>
</div>
<div class="spit-hr-1"></div>


<script type="text/javascript">
$(function() {
	// 删除评论监控事件
	$(
			'.mod-content-wrapper .mod-content-item .comment-info .comment-bars .bars .-delete-bar-dyc-${comment.id }')
			.click(
					function() {
						var _this = $(this);
						var _this_mod_content_item = _this
								.closest('.mod-content-item');

						var vals = _this.find('.value-store').val().split(',');
						var data = {
							id : vals[0]
						};

						deleteComment(data, _this_mod_content_item);
					});
	
	// 监控点击回复事件
	$(
			'.mod-content-wrapper .mod-content-item .comment-info .comment-bars .bars .-reply-bar-dyc-${comment.id }')
			.click(
					function() {
						var _this = $(this);
						var _this_comment_info = _this.closest('.comment-info');
						var _this_arrow = _this_comment_info.find(
								'.comment-bars').find('.arrow');
						if (!_this_arrow.is(":hidden")) { // 不是隐藏的
							_this_arrow.hide();
							_this_comment_info.find('.reply').hide();
						} else {
							_this_arrow.show();
							_this_comment_info.find('.reply').show();
						}

					});

	// 监控点赞事件
	$(
			'.mod-content-wrapper .mod-content-item .comment-info .comment-bars .bars .-like-bar-dyc-${comment.id }')
			.click(function() {
				var _this = $(this);

				var attitudeVals = _this.find('.value-store').val().split(',');
				var data = {
					itemType : attitudeVals[0],
					itemId : attitudeVals[1],
					type : attitudeVals[2]
				};

				var _this_i = _this.find('i');
				var _this_span = _this.find('span');
				if (_this_i.hasClass('undertone')) {
					dealAttitude(data, "add", _this_i, _this_span);
				} else {
					dealAttitude(data, "cancle", _this_i, _this_span);
				}

			});

	// 举报按钮隐藏展示事件
	$(
			'.mod-content-wrapper .mod-content-item .comment-info .comment-bars .bars')
			.hover(function() {
				var _this = $(this);
				_this.find('.report-bar').css('visibility', 'visible');
				_this.find('.report-bar-split').css('visibility', 'visible');
			}, function() {
				var _this = $(this);
				_this.find('.report-bar').css('visibility', 'hidden');
				_this.find('.report-bar-split').css('visibility', 'hidden');
			});

	layer.config({
		extend : [ baseUrl + '/resources/layer-v2.4/skin/moon/style.css'  ], // 加载新皮肤
		skin : 'layer-ext-moon'
	});

});

$(function() {
	/**
	 * 回复中的评论监控
	 */
	$(
			'.audio-others-wrapper .audio-comments .mods-wrapper .mod-content-items .mod-content-item .comment-info .reply .-reply-btn-div-dyc-${comment.id }')
			.click(
					function() {
						var _this = $(this);
						var mod_content_items = _this
								.closest('.mod-content-items');

						var
						content = $.trim(_this.closest('.reply').find(
								'.form-group textarea').val());

						var datsStrs = _this.find('.value-store').val().split(
								',');
						var data = {
							itemType : datsStrs[0],
							itemId : datsStrs[1],
							content : content
						};
						addComment(data, mod_content_items);
					});
})
</script>